<style>
.selector div{
	border: 1px solid #d4d4d4;
	height: 300px;
	width: 31%;
	margin-left: 2.118243%;
	box-sizing: border-box;
}
.selector div .active{
	background: #d4f8fc;
	border: 1px solid #4c9ed9;
}
.selector div p{
	cursor: pointer;
	padding: 3px 5px;
}
.selector div p:hover{
	background: #d4f8fc;
	border: 1px solid #4c9ed9;
}
.selector div .active span{
	display: block;
}
.prompt_box{
	padding: 30px 40px;
	width: 40%;
	margin:200px auto;
}
.prompt_box a{
	width: 100px;
	height: 30px;
	display: block;
	color: white;
	text-align: center;
	line-height: 30px;
	border-radius: 5px;
	background: #4c9ed9;
}
.prompt_box i{
	font-size: 57px;
}
.selector div{
 border: 1px solid #d4d4d4;
 height: 500px;
 width: 31%;
 margin-left: 2.118243%;
 box-sizing: border-box;
 overflow-y: scroll;
}
</style>
<div class="layui-card" style="padding:20px;">
  <div class="layui-card-body">
    <div class="layui-row">
    	<div class="selector clearfix">
    		<div class="fl cheak1 p_1 pr">
                <?php foreach($cat1 as $v):?>
    			<p class="blue clearfix" onclick="choice_cat(this,1)" tid='<?=$v['id']?>'><span class="fl"><?=$v['cat_title']?></span><span class="fr none">&gt;&gt;</span></p>
                <?php endforeach;?>
    		</div>
    		<div class="fl p_1 cheak2 pr">
    		</div>
    		<div class="fl p_1 cheak3 pr">
    		</div>
    	</div>
    </div>
    <div class="layui-row">
            <button style="display:block;width:30%;margin:30px auto;" class="layui-btn m_auto" onclick="next()">下一步</button>
    </div>
</div>
</div>
<script>
//选择分类的函数
function choice_cat(e,type){
    $(e).siblings().removeClass('active');
    $(e).addClass('active');
    var pid = $(e).attr('tid');
    if(type==1){
        var index = layer.load(2, {time: 10*1000});
        $.ajax({
            url:'<?=url("goodscat/getsub")?>',
            method:'post',
            dataType:'json',
            data:{pid:pid},
            success:function(rs){
                var html = '';
                $.each(rs.data,function(i,e){
                    html += '<p class="blue clearfix" onclick="choice_cat(this,2)" tid="'+i+'"><span class="fl">'+e+'</span><span class="fr none">&gt;&gt;</span></p>';
                });
                $('.cheak2').html(html);
                $('.cheak3').html('');
            },
            complete:function(){
                layer.closeAll('loading');
            }
        });
    }else if(type==2){
        var index = layer.load(2, {time: 10*1000});
        $.ajax({
            url:'<?=url("goodscat/getsub")?>',
            method:'post',
            dataType:'json',
            data:{pid:pid},
            success:function(rs){
                var html = '';
                $.each(rs.data,function(i,e){
                    html += '<p class="blue clearfix" onclick="choice_cat(this,3)" tid="'+i+'"><span class="fl">'+e+'</span><span class="fr none">&gt;&gt;</span></p>';
                });
                $('.cheak3').html(html);
            },
            complete:function(){
                layer.closeAll('loading');
            }
        });
    }
}
//下一步函数
function next(){
    var id = $(".active:last").attr('tid');
    if(typeof(id) == 'undefined'){
        alert_msg('请选择分类');
    }else{
        var url = "<?=url('goods/add')?>?cat_id="+id;
        window.location.href=url;
    }
}
</script>
